<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			:root {
				--loading-grey: #ededed;
			}
			body {
				background-color: #f6f6f6;
				font-family: Helvetica;
				font-size: 15px;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				min-height: 100vh;
			}
			.card {
				width: 320px;
				background-color: #fff;
				border-radius: 6px;
				overflow: hidden;
				box-shadow: 0px 4px 6px rgba(0, 0, 0, .12);
			}
			.image {
				height: 200px;
			}
			.image img {
				display: block;
				width: 100%;
				height: inherit;
				object-fit: cover;
			}
			.content {
				padding: 2rem 1.8rem;
			}
			h4 {
				margin: 0 0 1rem;
				font-size: 1.5rem;
				line-height: 1.5rem;
			}
			.description {
				font-size: 1rem;
				line-height: 1.4rem;
			}
			.loading .image,
			.loading h4,
			.loading .description {
				/* background-color: var(--loading-grey); */
				background: linear-gradient(
					100deg,
					rgba(255, 255, 255, 0) 40%,
					rgba(255, 255, 255, 0.5) 50%,
					rgba(255, 255, 255, 0) 60%
				) var(--loading-grey);
				background-size: 200% 100%;
				background-position-x: 120%;
				animation: 1s loading ease-in-out infinite;
			}
			@keyframes loading {
				to {
					background-position-x: -20%;
				}
			}
			
			.loading h4 {
				min-height: 1.6rem;
				border-radius: 4px;
				animation-delay: 0.05s;
			}
			.loading .description {
				min-height: 4rem;
				border-radius: 4px;
				animation-delay: 0.06s;
			}
		</style>
	</head>
	<body>
		<div class="card">
			<div class="image">
				<img src="../css-grid/images/img1.jpg" alt="" />
			</div>
			<div class="content">
				<h4>CodingStartup</h4>
				<div class="description">
					如何在 Microsoft Office Word中插入示例文本 若要在 Word 中插入示例文本，请使用以下方法之一。
					 方法 1：使用 rand () 若要在Word中插入本地化的示例文本，请在要显示文本的文档中键入 =rand ()
						，然后按 Enter 。
				</div>
			</div>
		</div>
		<div class="card loading">
			<div class="image"></div>
			<div class="content">
				<h4></h4>
				<div class="description">
				</div>
			</div>
		</div>
	</body>
</html>